<!--
  -    Copyright (c) 2018-2025, hycloud All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: hycloud
  -->
<template>
    <div class="execution">
        <basic-container>
            <avue-crud ref="crud"
                v-model="form"
                :page.sync="page"
                :data="tableData"
                :permission="permissionList"
                :table-loading="tableLoading"
                :option="tableOption"
                @on-load="getList"
                @search-change="searchChange"
                @refresh-change="refreshChange"
                @size-change="sizeChange"
                @current-change="currentChange"
                @row-update="handleUpdate"
                @row-save="handleSave"
                @row-del="rowDel">
                <template slot="status" slot-scope="scope">
                    <el-switch
                        :value="scope.row.status == '0'? false : true"
                        active-color="#13ce66"
                        @change="changeStatus($event, scope)"
                        inactive-color="#ff4949">
                    </el-switch>
                </template>
                <template
                    slot="handleIdForm"
                    slot-scope="scope">
                    <el-select v-model="form.handleId"
                            @change="changeAdmin"
                            placeholder="请选择负责人"
                            clearable>
                        <el-option v-for="item in optionsGly"
                                :key="item.userId"
                                :label="item.realname"
                                :value="item.userId">
                        </el-option>
                    </el-select>
                </template>
                <template
                    slot="handleList"
                    slot-scope="scope">
                    {{scope.row.handleNameStr}}
                </template>
                <template
                    slot="handleId"
                    slot-scope="scope">
                    {{scope.row.handleRealname}}
                </template>
                <template
                    slot="handleListForm"
                    slot-scope="scope">
                    <el-select v-model="form.handleList1"
                            @change="changeMember"
                            multiple
                            placeholder="请选择群组成员"
                            clearable>
                        <el-option v-for="item in optionsCy"
                                :key="item.userId"
                                :label="item.realname"
                                :value="item.userId">
                        </el-option>
                    </el-select>
                </template>
                <template slot="menu" slot-scope="scope">
                    <el-button type="text"
                    icon="el-icon-circle-plus"
                    size="small"
                    @click="openform(scope)">维保设备</el-button>
                </template>
            </avue-crud>
        </basic-container>
        <el-dialog
            :visible.sync="modal"
            v-if="modal"
            title="维保设备"
            fullscreen
            :close-on-click-modal="false"
            append-to-body>
            <maintenanceplan-asset :planId="planId"></maintenanceplan-asset>
        </el-dialog>
    </div>
</template>

<script>
    import {fetchList, getObj, addObj, putObj, delObj} from '@/api/maintenance/maintenanceplan'
    import {getUserPage} from '@/api/admin/sysgroup'
    import maintenanceplanAsset from '@/views/maintenance/maintenanceplanasset/index'
    import {tableOption} from '@/const/crud/maintenance/maintenanceplan'
    import { roleCodeArray } from "@/api/admin/user";
    import {mapGetters} from 'vuex'

    export default {
        components: { maintenanceplanAsset },
        name: 'maintenanceplan',
        data() {
            return {
                form: {},
                planId: '',
                modal: false,
                searchForm: {},
                tableData: [],
                optionsGly: [],
                optionsCy: [],
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20 // 每页显示多少条
                },
                tableLoading: false,
                tableOption: tableOption
            }
        },
        computed: {
            ...mapGetters(['permissions']),
            permissionList() {
                return {
                    addBtn: this.vaildData(this.permissions.act_maintenanceplan_add, false),
                    delBtn: this.vaildData(this.permissions.act_maintenanceplan_del, false),
                    editBtn: this.vaildData(this.permissions.act_maintenanceplan_edit, false)
                };
            }
        },
        watch:{
            'form.groupId':{
                handler(val){
                    this.form.handleList1 = []
                    getUserPage({
                        current: 1,
                        size: 1000,
                        groupId:val
                    }).then(response => {
                        this.optionsCy = response.data.data.records
                    })
                }
            }
        },
        created() {
            this.init()
        },
        methods: {
            init() {
                 // 管理员
                roleCodeArray(['ROLE_MAINTENANCE_HANDEL']).then(response => {
                    this.optionsGly = response.data.data
                })
            },
            openform(scope) {
                this.planId = scope.row.planId
                this.modal = true
            },
            changeAdmin(value) {
                let list = this.optionsGly.filter(item => {
                    return item.userId === value
                })[0]
                this.form.handleName = list.username
                this.form.handleRealname = list.realname
            },
            changeStatus(value, scope) {
                let params = Object.assign({}, scope.row)
                if (scope.row.status == '0') {
                    params.status = '1'
                } else {
                    params.status = '0'
                }
                putObj(params).then(response => {
                    this.$message.success('修改成功')
                    this.getList(this.page)
                })
            },
            changeMember(value) {
                if (value.length) {
                    let handleList = []
                    value.map(item => {
                        let atts = this.optionsCy.filter(citem => {
                            return citem.userId === item
                        })[0]
                        handleList.push({
                            handleId: atts.userId,
                            handleRealname: atts.realname
                        })
                    })
                    this.form.handleList = handleList
                }
            },
            getList(page, params) {
                this.tableLoading = true
                fetchList(Object.assign({
                    current: page.currentPage,
                    size: page.pageSize
                }, params, this.searchForm )).then(response => {
                    response.data.data.records.map(item => {
                        let handleList1 = []
                        let handleNameList = []
                        item.handleList.map(citem => {
                            handleList1.push(citem.handleId)
                            handleNameList.push(citem.handleRealname)
                        })
                        item.handleList1 = handleList1
                        item.handleNameStr = handleNameList.join(',')
                    })
                    this.tableData = response.data.data.records
                    this.page.total = response.data.data.total
                    this.tableLoading = false
                }).catch(() => {
                    this.tableLoading=false
                })
            },
            rowDel: function (row, index) {
                this.$confirm('是否确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    return delObj(row.planId)
                }).then(data => {
                    this.$message.success('删除成功')
                    this.getList(this.page)
                })
            },
            handleUpdate: function (row, index, done,loading) {
                putObj(row).then(data => {
                    this.$message.success('修改成功')
                    done()
                    this.getList(this.page)
                }).catch(() => {
                    loading();
                });
            },
            handleSave: function (row, done,loading) {
                addObj(row).then(data => {
                    this.$message.success('添加成功')
                    done()
                    this.getList(this.page)
                }).catch(() => {
                    loading();
                });
            },
            sizeChange(pageSize){
                this.page.pageSize = pageSize
            },
            currentChange(current){
                this.page.currentPage = current
            },
            searchChange(form, done) {
                this.searchForm = form
                this.page.currentPage = 1
                this.getList(this.page, form)
                done()
            },
            refreshChange() {
                this.getList(this.page)
            }
        }
    }
</script>